<template>
  <div class="flex" style="width: 100vw; height: 100vh">
    <el-container>
      <el-header class="elHeader">
        <h3 class="header-name">{{ info.name }}</h3>
        <img class="header-avatar" :src="info.avatar" alt="" srcset="" />
        <el-link class="header-logout" @click="userLogout" type="primary">退出登录</el-link>
      </el-header>
      <el-container>
        <el-aside class="elAside">
          <NuxtLink v-for="item in routeList" :key="item.url" :to="{ path: `/${item.url}` }">
            <div :class="['link', { 'link-active': activeRoute === item.url }]">{{ item.title }}</div>
          </NuxtLink>
        </el-aside>
        <el-container>
          <el-main class="relative" style="padding: 0 !important">
            <div class="elMain">
              <slot />
            </div>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
const { info, logout } = useUserInfo()

const userLogout = () => {
  logout()
  return navigateTo('/login')
}

let routeList = [
  {
    title: '首页',
    url: 'home'
  },
  {
    title: '路由[内部]',
    url: 'withinRoute'
  },
  {
    title: '路由[覆盖]',
    url: 'externalRoute'
  },
  {
    title: '组件',
    url: 'comp'
  }
]

const nuxt = useNuxtApp()
let activeRoute = ref('')
watch(
  () => nuxt._route.fullPath,
  newValue => {
    activeRoute.value = newValue.split('/')[1]
  },
  { immediate: true }
)
</script>

<style></style>

<style lang="scss" scoped>
.link {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 20px;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
}

.link-active {
  background-color: #88c4ff;
}

.elHeader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-bottom: 1px solid #e4e4e4;

  .header-name {
    position: absolute;
    left: 20px;
  }

  .header-avatar {
    width: 50px;
    height: 50px;
  }

  .header-logout {
    position: absolute;
    right: 20px;
  }
}

.elAside {
  width: 200px;
  border-right: 1px solid #e4e4e4;
}

.elMain {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  padding: 15px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 8px;
    background-color: #f1f1f1;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
  }
}
</style>
